<template>
	<view class="container">
		<!-- F1 轮播图+菜单 头部 -->
		<view class="herder">
			<!-- F1-1 轮播图 开始 -->
			<swiper 
			class="top-img indicators-dot" 
			autoplay 
			circular 
			interval='3000' 
			indicator-color="#D3D3D3" 
			indicator-active-color="#3E9CF9"
			indicator-dots
			>
				<swiper-item class="swiperItem" v-for="(item,i) in swpierList" :key="i">
					<image style="width: 100%; height: 260rpx;"  :src="item">
				</swiper-item>
			</swiper>
			<!-- F1-1 轮播图 结束 -->
			
			<!-- F1-2 宫格菜单 开始 -->
			<view>
				<u-grid :border="false" col="4">
					<u-grid-item @click="_clickJump(listIndex)"  style="background-color:rgb(247,247,249)" u-slot v-for="(listItem,listIndex) in menuList" :key="listIndex">
						<view :class="listItem.boxclass">
							<image class="icon":src="listItem.icon" mode=""></image>
						</view>
						<text class="grid-text" style="margin-top:10upx ;">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<!-- F1-2 宫格菜单 结束 -->
			
		</view>
		<!-- F1 轮播图+菜单 结束 -->
		<view class="info">
			
			

			<view style="margin-left: 10upx;">
				<text class="homePageNavText">青溪古镇</text>
				<text class="homePageNavText_2">景区导航导视</text>
				<view class="homePageNavText_3">
					<text>古镇风貌 提前一览</text>
					<!-- 导航广告图片2 -->
					<image class="homePageNavImg_2" src="../../static/home/homePageNav.png"></image>
				</view>
			</view>
			<!-- 导航广告图片 -->
			<image class="homePageNavImg" src="../../static/home/homePageNav2.png" mode=""></image>
			
		</view>
		
		
		<view class="information ">
			<view style="margin-bottom: 80rpx; display: flex;align-items: center; justify-content: space-evenly;">
				<view style="width: 800rpx;">
					<!-- 此处使用uni-segmented-control组件需要下载     ：样式在组件样式中修改的 -->
				        <qc-segmented-control  :current="current" :values="items" @clickItem="_onclickTab" styleType="text" activeColor="#ffffff">
							
						</qc-segmented-control>
				        <view class="content">
							<!-- F1 -->
				            <view v-show="current === 0">
									<!-- 选项1的内容 -->
				                <view class="listItem" @click="_clickGoDetail(index)" v-for="(card,index) in 4" :key='index'>
				                	<image src="../../static/home/Rectangle2049.png" mode="" style="width:400rpx;height: 188rpx; margin-left: 5px;"></image>
				                	<view  style="line-height: 60upx;margin-left: 36upx;font-size:14px; ">
				                		<text class="title">这是card 1内容1111111111111111111111111111111111111</text>
				                		<!-- <view>
				                			<u-tag text="园区动态" plain> </u-tag>
				                		</view> -->
										<view class="">
											<text style="color: silver;">2021-10-16 18:20:02</text>
										</view>
				                		
				                	</view>
				                </view>
								
			
							
				            </view>
							
							
							<!-- F2 -->
				            <view v-show="current === 1">
				                <!-- 选项卡2的内容 -->
								
								<view class="listItem" @click="_clickGoDetail(index)" v-for="(card,index) in 2" :key='index'>
									<image src="../../static/home/Rectangle2049.png" mode="" style="width:400rpx;height: 188rpx; margin-left: 5px;"></image>
									<view  style="line-height: 60upx;margin-left: 36upx;font-size:14px; ">
										<text class="title">这是card 2内容2222222222222</text>
										<!-- <view>
											<u-tag text="园区动态" plain> </u-tag>
										</view> -->
										<view class="">
											<text style="color: silver;">2021-10-16 18:20:02</text>
										</view>
										
									</view>
								</view>
								 <!-- 选项卡2的内容 结束-->
				            </view>
							<!-- F3 -->
				            <view v-show="current === 2">
				                <!-- 选项卡3的内容 -->
								<view class="listItem" @click="_clickGoDetail(index)" v-for="(card,index) in 3" :key='index'>
									<image src="../../static/home/Rectangle2049.png" mode="" style="width:400rpx;height: 188rpx; margin-left: 5px;"></image>
									<view  style="line-height: 60upx;margin-left: 36upx;font-size:14px; ">
										<text class="title">这是card 3内容333333</text>
										<!-- <view>
											<u-tag text="园区动态" plain> </u-tag>
										</view> -->
										<view class="">
											<text style="color: silver;">2021-10-16 18:20:02</text>
										</view>
										
									</view>
								</view>
								 <!-- 选项卡3的内容 结束-->
				            </view>
							<view v-show="current === 3">
							    <!-- 选项卡4的内容 -->
								<view class="listItem" @click="_clickGoDetail(index)" v-for="(card,index) in 4" :key='index'>
									<image src="../../static/home/Rectangle2049.png" mode="" style="width:400rpx;height: 188rpx; margin-left: 5px;"></image>
									<view  style="line-height: 60upx;margin-left: 36upx;font-size:14px; ">
										<text class="title">这是card 1内容1111111111111111111111111111111111111</text>
										<!-- <view>
											<u-tag text="园区动态" plain> </u-tag>
										</view> -->
										<view class="">
											<text style="color: silver;">2021-10-16 18:20:02</text>
										</view>
										
									</view>
								</view>
								 <!-- 选项卡4的内容 结束 -->
							</view>
				        </view>
				    </view>
			</view>

			
		</view>
		<wx-tabbar></wx-tabbar>
	</view>
	
</template>


<script>

	export default {
		
		data() {
			return {
				data:{},
				// 菜单配置
				menuList: [
					{
						name: 'order',
						title: '在线政务',
						boxclass: 'box1',
						icon:'../../static/home/onlineService.png',
						url:'../../package_biz/pages/onlineService/onlineService'
					},
					{
						name: 'order',
						title: '组织风采',
						boxclass: 'box2',
						icon:'../../static/home/eventReport.png',
						url:'../../package_biz/pages/organize/organize'
					},
					{
						name: 'order',
						title: '人人通电视',
						boxclass: 'box3',
						icon:'../../static/home/peoplesTV.png',
						url:'../../package_biz/pages/television/television'
					},
					{
						name: 'order',
						title: '疫情防控',
						boxclass: 'box1',
						icon:'../../static/home/epidemicControl.png',
						// 跳转目的地未知
						url:''
					},
					{
						name: 'order',
						title: '办事指南',
						boxclass: 'box4',
						icon:'../../static/home/business.png',
						url:'../../package_biz/pages/serviceGuide/serviceGuide'
					},
					{
						name: 'order',
						title: '就业创业',
						boxclass: 'box5',
						icon:'../../static/home/getJobs.png',
						//跳转目的地未知
						url:'',
					},
					{
						name: 'order',
						title: '家乡故事',
						boxclass: 'box4',
						icon:'../../static/home/homeTown.png',
						//跳转目的地未知
						url:''
					},
					{
						name: 'order',
						title: '更多服务',
						boxclass: 'box2',
						icon:'../../static/home/moreService.png',
						// 跳转目的地未知
						url:''
					},
				],
				//轮播图配置
				swpierList: [
					"../../static/home/Rectangle.png",
					"../../static/home/Rectangle.png",
					"../../static/home/Rectangle.png",
				],
				//选项卡配置
				current:0,
				items:['乡村公告','政策公共','组织信息','本地故事']
			}

		},
		onLoad() {
			
		},
		methods:{
			// 宫格菜单跳转
			_clickJump(index){
				console.log('当前点击的菜单的下标：',index);
				if(this.menuList[index].url){
					uni.navigateTo({
						url:this.menuList[index].url
					})
				}else{
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none',
						duration: 2000
					});
				}
				
			},
			// 选项卡切换
			_onclickTab(e){
				if(this.current!= e.currentIndex){
					this.current = e.currentIndex
					//如果保存的下标不是当前选项卡则切换至当前事件源传来的下标的选项卡
					//然后发起请求
					//console.log('==========',getApp());
					// 获取app.vue中的请求方法
					let request = getApp().request()
					//获取到数据
					request.then(res=>{
						console.log('获取到的数据',res);
					})
				}
			},
			_clickGoDetail(index){
				console.log('当前点击的是card:',index);
				uni.navigateTo({
					url:'../../package_biz/pages/television/detailsInfo'
				})
			}
			
		}
		
			  
			

	}
</script>




<style lang="scss">
	:not(not){
		box-sizing: border-box;
	}
	page {
		background: $page-color-base;
	}
	
	.container {
		
		padding: 32upx;
		// 菜单图标
		.icon{
			width: 86rpx;
			height: 86rpx;
		}
		.herder {
			// 轮播图样式开始
			/deep/.top-img {
				width: 100%;
				height: 130px;
				div{
					border-radius: 8px !important;
				}
				
			}
			// 轮播图指示器样式
			/deep/.indicators-dot{
				.uni-swiper-dot{
					width: 5px !important;
					height: 5px !important;
				}
				.uni-swiper-dot-active{
					width: 5px !important;
					height: 5px !important;
				}
				/deep/.swiperItem{
					border-radius: 8px;
					text-align: center;
					
				}
				
			}
			
		}

		.info {
			background: #FFFFFF;
			border-radius: 4px;
			width: 100%;
			// padding: 20upx 23upx;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: space-evenly;
			
		}
		
		.information {
			margin-top: 16upx;	
		}
		//广告导航文字样式
		.homePageNavText{
			color: #33D6A6;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 700;
			font-size: 38rpx;
			line-height: 54rpx;
			margin-left: 8rpx;
			margin-right: 20rpx;
		}
		.homePageNavText_2{
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 700;
			font-size: 38rpx;
			line-height: 54rpx;
		}
		.homePageNavText_3{
			color: #999999;
			padding: 6rpx 0px;
			margin-left: 8rpx;
		}
		.homePageNavImg{
			width: 220rpx;
			height: 180rpx;
		}
		.homePageNavImg_2{
			margin-left: 20rpx;
			width: 70rpx;
			height: 30rpx;
			vertical-align: middle;
		
		}
		
		// 新闻列表样式
		.listItem{
			margin: 0px 55rpx 16rpx 55rpx;
			display: flex;
			align-items: center; 
			background-color:#FFFFFF ;
			padding: 20rpx; 
			border-radius: 24rpx;
			.title{
				width: 378rpx;
				overflow: hidden; /*文本超出隐藏*/
				display:-webkit-box; /*盒子模型微弹性伸缩模型*/
				-webkit-box-orient: vertical;/*伸缩盒子的子元素垂直排列*/
				-webkit-line-clamp: 2; /*文本显示3行*/
				text-overflow: ellipsis;
				
			}
		}
	}
	
</style>
